<template>
  <a-modal :visible="visible" :title="title" width="640px" @ok="submitAudit" @cancel="handleCancel">
    <a-row>
      <a-col :span="24">
        <a-descriptions
          :column="2"
          style="padding: 20px 20px 0px 20px; background: #efefef; border-bottom: 1px solid #e8e8e8"
        >
          <a-descriptions-item label="提交人">{{detail.driverName}}</a-descriptions-item>
          <a-descriptions-item label="提交时间">{{detail.createTime}}</a-descriptions-item>
          <a-descriptions-item label="审核人">{{detail.auditorName}}</a-descriptions-item>
          <a-descriptions-item label="审核时间">{{detail.auditTime ? detail.auditTime:'--'}}</a-descriptions-item>
          <a-descriptions-item
            label="审核状态"
          >{{detail.status === 1 ? '待审核' : (detail.status === 2 ? '审核通过' : (detail.status === 3 ? '审核不通过' : ''))}}</a-descriptions-item>
        </a-descriptions>

        <a-form-model
          :model="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          class="she_tanc"
        >
          <a-col :span="24">
            <a-col :span="12">
              <a-form-model-item label="公司编号">
                <a
                  :href="`/landCenter/orderDispatch/${detail.orderTruckId}`"
                  target="_blank"
                >{{detail.truckOrderCode}}</a>
              </a-form-model-item>
            </a-col>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="车辆">{{detail.tractorNumber}}</a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="司机">{{detail.driverName}}</a-form-model-item>
          </a-col>
          <a-col :span="24" class="suo_add">
            <a-form-model-item label="所在位置">
              {{detail.lbsName}}
              <br />
              {{detail.lbsAddress}}
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="禁区照片" :labelCol="{span:4}" :wrapperCol="{span: 20}">
              <viewer :images="penaltyPicsArr" :options="{url: 'data-x'}">
                <template v-for="(src,index) in penaltyPicsArr">
                  <img
                    style="width:100px;height:100px;margin-right:10px;border:1px solid #eee"
                    :src="`${src}?x-oss-process=image/resize,h_100`"
                    :data-x="src"
                    :key="index"
                    v-if="src"
                  />
                </template>
              </viewer>
            </a-form-model-item>

            <template v-if="detail.status===1">
              <a-form-model-item label="审核" :labelCol="{span:4}" :wrapperCol="{span: 20}">
                <a-radio-group v-model="form.status">
                  <a-radio :value="2">审核通过</a-radio>
                  <a-radio :value="3">审核不通过</a-radio>
                </a-radio-group>
              </a-form-model-item>
              <a-form-model-item label="原因" :labelCol="{span:4}" :wrapperCol="{span: 20}">
                <a-textarea v-model="form.auditDesc"></a-textarea>
              </a-form-model-item>
            </template>
          </a-col>
        </a-form-model>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import { queryAuditTruckPenaltyAreaDetail, auditTruckPenaltyArea } from '@/api/landCenter'
import 'viewerjs/dist/viewer.css'

const defaultForm = () => ({
  status: 2,
  auditDesc: ''
})

export default {
  props: {
    visible: Boolean,
    id: Number
  },
  data () {
    return {
      detail: {
        penaltyPics: ''
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      form: defaultForm()
    }
  },
  computed: {
    title () {
      return this.detail.status === 1 ? '审核' : '详情'
    },
    penaltyPicsArr () {
      return this.detail.penaltyPics ? this.detail.penaltyPics.split(',') : null
    }
  },
  methods: {
    handleCancel () {
      this.$emit('setVisible')
    },
    submitAudit () {
      if (this.detail.status !== 1) {
        this.$emit('setVisible')
      } else {
        auditTruckPenaltyArea({...this.form, penaltyAreaId: this.id}).then(rsp => {
          this.$message.success('审核完成')
          this.$emit('setVisible', true)
        })
      }
    }
  },
  watch: {
    visible () {
      this.form = defaultForm()
      if (this.visible && this.id) {
        queryAuditTruckPenaltyAreaDetail({penaltyAreaId: this.id}).then(rsp => {
          this.detail = rsp.data
        })
      }
    }
  }
}
</script>
<style >
.she_tanc .ant-form-item {
  margin-bottom: 10px;
}
.suo_add .ant-form-item-label {
  width: 16.8%;
}
</style>
